import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '@/components/MusicHall/index/NewSong/Banner.scss'

 class Banner extends Component {
    constructor (props) {
        super(props)
        this.state = {
        }
    }
    render () {
      console.log(this.props)
      const list = this.props.list;
        return (
          <div className='newsong-box'>
            <ul className='newsong-ul'>
            {
              list.map ((item,index) => {
                // console.log(item.time)
                // const detailurl = '/musichall/playlist/' +  item.id;
                // const listurl = '/player/' +  item.id;

                const m = parseInt(item.time/60); //分
                // console.log(m)
                var s = item.time - m*60 //秒
                if (s<10) {
                  s = '0' + s
                } 
                return (
                  <li key={item.id}>
                    <Link to={'/player/' +  item.id}>
                    <div className='newsong_li'>
                      <div className='cover_box'>
                        <i className='iconfont icon-videofill'></i>
                      </div>
                      <img className='newsong_img' src={item.pic} alt=""/>
                    </div>  
                    </Link>                   
                    <div>
                      <Link to={'/musichall/playlist/' +  item.id}>
                        <h5>{item.name}</h5>
                      </Link>
                      {/* 跳转到  歌手 所有歌曲 列表 =======未完成*/}
                      {/* <Link to=''> */}
                        <span>{item.singer}</span>
                      {/* </Link> */}
                    </div>
                    <p>{m}:{s}</p>
                  </li>
                )             
              })  
            }
            </ul>
          </div>
        )
    }     
 }
 export default Banner